<!-- 用户管理对话框 -->
<template>
    <el-dialog v-model="dialogFormVisible" title="修改用户角色" width="40%">
        <el-form :model="userForm" ref="userForms">
            <el-form-item prop="avatarUrl" label="头像" :label-width="formLabelWidth">
                <img :src="userForm.avatarUrl" alt="">
            </el-form-item>
            <el-form-item prop="" label="角色" :label-width="formLabelWidth">
                <el-select v-model="value" placeholder="请选择状态" style="width: 200px">
                    <el-option v-for="item in options" :key="item.id" :label="item.roleName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item prop="userAccount" label="账号" :label-width="formLabelWidth">
                <el-input v-model="userForm.userAccount" disabled />
            </el-form-item>
            <el-form-item prop="username" label="昵称" :label-width="formLabelWidth">
                <el-input v-model="userForm.username" disabled />
            </el-form-item>
            <el-form-item prop="userTel" label="电话" :label-width="formLabelWidth">
                <el-input v-model="userForm.userTel" disabled />
            </el-form-item>
            <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="userForm.email" disabled />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import $bus from '../../../bus'
import { AllUserRoles, GetUserRoleInfoResponse, UserInfo } from '../../../api/user/type';
import { reqUserRoleInfo } from '../../../api/user';
defineProps(['paginationData'])
let userForms = ref()
let formLabelWidth = ref<String>('100px')
let dialogFormVisible = ref<Boolean>(false)
const value = ref('')
const options = reactive<AllUserRoles>([])
let $emit = defineEmits(['changeUserRole'])
// 收集对话框中的数据
let userForm = reactive<UserInfo>({
    // roleId: '',
    // userId: '',
    // enable: 0
})


onMounted(() => {
    $bus.on('showDialog', async (obj: any) => {
        // 显示对话框
        dialogFormVisible.value = obj.isShow
        let result: GetUserRoleInfoResponse = await reqUserRoleInfo()
        Object.assign(options, result.data)
        // 赋值
        if (obj.row) {
            value.value = obj.row.roleId
            Object.assign(userForm, obj.row)
        }
    })
})


// 对话框确认按钮回调
const submit = () => {
    let data = {
        roleId: value.value,
        userId: userForm.userId
    }
    $emit('changeUserRole', data)
    // 关闭对话框
    dialogFormVisible.value = false
}

</script>

<style lang="scss" scoped>
.el-form {
    padding-right: 50px;
    padding-top: 20px;

    img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
}
</style>